<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/app.js"></script>

    <!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
</head>
<body>
<!--头部导航-->
<header class="am-topbar admin-header">
    <div class="am-topbar-brand"><img src="assets/i/logo.png">后台管理系统</div>

    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav admin-header-list">
            <li class="kuanjie">
<!--                <a href="#">管理员个人信息</a>-->
                <a href="BGOUser.html">用户信息</a>
                <a href="BGOStorage.html">信息存储表</a>
                <a href="BGOUseract.html">用户参与信息</a>
                <a href="BGOEvent.html">活动事件地点</a>
                <a href="BGOAnnouncement.html">活动公告</a>
                <a href="BGOVolunteer.html">志愿活动</a>
            </li>
        </ul>
    </div>
</header>

<div class="am-cf admin-main">
    <!--左边导航-->
    <div class="nav-navicon admin-main admin-sidebar">
        <div class="sideMenu am-icon-dashboard" style="color:white; margin: 10px 0 0 0;" id="adminApp"> 欢迎系统管理员：
            <span id="admin_nickname" v-html="admin_nickname"></span>
        </div>

        <div class="sideMenu" class="side-nav">
            <h3 class="am-icon-users"><em></em> <a href="#">用户管理</a></h3>
            <ul class="side-nav">
                <li><a href="BGOUser.html">用户信息</a></li>
                <li><a href="BGOStorage.html">信息存储</a></li>
                <li><a href="BGOUseract.html">用户参与活动</a></li>
            </ul>
            <h3 class="am-icon-flag on"><em></em> <a href="#"> 活动管理</a></h3>
            <ul class="side-nav">
                <li class="active"><a href="BGOEvent.html">活动事件地点</a></li>
                <li><a href="BGOAnnouncement.html">活动公告</a></li>
                <li><a href="BGOVolunteer.html">志愿活动</a></li>
            </ul>
            <!--
            <h3 class="am-icon-user"><em></em> <a href="#">会员管理</a></h3>
            <ul>
                <li><a href="#">会员列表</a></li>
                <li><a href="#">未激活会员</a></li>
            </ul>
            -->
        </div>
        <script type="text/javascript">
            jQuery(".sideMenu").slide({
                titCell: "h3", //鼠标触发对象
                targetCell: "ul", //与titCell一一对应，第n个titCell控制第n个targetCell的显示隐藏
                effect: "slideDown", //targetCell下拉效果
                delayTime: 300, //效果时间
                triggerTime: 150, //鼠标延迟触发时间（默认150）
                defaultPlay: true, //默认是否执行效果（默认true）
                returnDefault: true //鼠标从.sideMen移走后返回默认状态（默认false）
            });
        </script>
    </div>

    <!--右边小页面导航-->
    <div class=" admin-content">
        <div class="daohang">
            <ul>
                <li>
                    <button type="button" class="am-btn am-btn-default am-radius am-btn-xs">活动事件</button>
                </li>
            </ul>
        </div>
        <!--右方主要内容显示-->
        <div class="admin">
            <div class="admin-index" id="shuju1">
                <dl data-am-scrollspy="{animation: 'slide-right', delay: 100}">
                    <dt class="qs"><i class="am-icon-users"></i></dt>
                    <dd v-text="user_shuju"></dd>
                    <dd class="f12">用户人数</dd>
                </dl>
                <dl data-am-scrollspy="{animation: 'slide-right', delay: 300}">
                    <dt class="cs"><i class="am-icon-user"></i></dt>
                    <dd v-text="vip_shuju"></dd>
                    <dd class="f12">会员人数</dd>
                </dl>
                <dl data-am-scrollspy="{animation: 'slide-right', delay: 600}">
                    <dt class="hs"><i class="am-icon-flag"></i></dt>
                    <dd v-text="activity_shuju"></dd>
                    <dd class="f12">活动事件数</dd>
                </dl>
                <dl data-am-scrollspy="{animation: 'slide-right', delay: 900}">
                    <dt class="ls"><i class="am-icon-heart"></i></dt>
                    <dd v-text="volunteer_shuju"></dd>
                    <dd class="f12">志愿活动个数</dd>
                </dl>
            </div>

            <!--表格显示-->
            <!--
            <div class="admin-biaoge" id="eventApp">
                <div class="xinxitj">活动事件</div>
                <table class="am-table">
                    <thead>
                    <tr>
                        <th>事件id</th>
                        <th>活动id</th>
                        <th>发布者id</th>
                        <th>活动标题</th>
                        <th>活动详情</th>
                        <th>活动地址</th>
                        <th>活动城市</th>
                        <th>活动发布时间</th>
                        <th>活动时长</th>
                        <th>报名人数</th>
                        <th>最高上限人数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="e in event_arr">
                        <td v-text="e.id"></td>
                        <td v-text="e.activityId"></td>
                        <td v-text="e.userId"></td>
                        <td v-text="e.activityTitle"></td>
                        <td v-text="e.activityDetails"></td>
                        <td v-text="e.activityAddress"></td>
                        <td v-text="e.activityCity"></td>
                        <td v-text="e.activityTime"></td>
                        <td v-text="e.duration"></td>
                        <td v-text="e.willNum"></td>
                        <td v-text="e.maxNum"></td>
                        <td><a href="#" @click="deleteById(e.id)">删除</a></td>
                    </tr>
                    </tbody>
                </table>
                <div id="page">
                    <nav aria-label="Page navigation example">
                        <div class="pagination">
                            <button class="page-item page-link" href="#"
                                    @click.prevent="loadEvents(pageInfo.prePage)">
                                上一页
                            </button>
                            <button class="page-item page-link" href="#"
                                    v-for="n in pageInfo.navigatepageNums"
                                    @click.prevent="loadEvents(n)"
                                    v-bind:class="{'bg-secondary lightskyblue':pageInfo.pageNum == n}">
                                <span v-text="n">1</span>
                            </button>
                            <button class="page-item page-link" href="#"
                                    @click.prevent="loadEvents(pageInfo.nextPage)">
                                下一页
                            </button>
                        </div>
                    </nav>
                </div>
            </div>
            -->

            <div class="admin-biaoge" id="eventApp">
                <div class="admin-biaogelist">
                    <div class="listbiaoti am-cf">
                        <ul class="am-icon-flag-o"> 活动事件管理</ul>
                        <dl class="am-icon-home" style="float: right;">当前位置： 活动管理 > <a href="#">活动事件管理</a></dl>
                    </div>
                    <form class="am-form am-g">
                        <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                            <thead>
                            <tr class="am-success">
                                <!--                            <th class="table-check"><input type="checkbox" /></th>-->

                                <th class="table-id">事件ID</th>
                                <th class="table-title">活动ID</th>
                                <th class="table-type">发布者ID</th>
                                <th class="table-author am-hide-sm-only">活动标题</th>
                                <th class="table-author am-hide-sm-only">活动详情</th>
                                <th class="table-date am-hide-sm-only">活动地址</th>
                                <th class="table-date am-hide-sm-only">活动城市</th>
                                <th class="table-date am-hide-sm-only">活动发布时间</th>
                                <th class="table-date am-hide-sm-only">活动时长</th>
                                <th class="table-date am-hide-sm-only">报名人数</th>
                                <th class="table-date am-hide-sm-only">最高上限人数</th>
                                <th width="60px" class="table-set">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="e in event_arr">
                                <td v-text="e.id"></td>
                                <td v-text="e.activityId"></td>
                                <td v-text="e.userId"></td>
                                <td v-text="e.activityTitle"></td>
                                <td v-text="e.activityDetails"></td>
                                <td v-text="e.activityAddress"></td>
                                <td v-text="e.activityCity"></td>
                                <td v-text="e.activityTime"></td>
                                <td v-text="e.duration"></td>
                                <td v-text="e.willNum"></td>
                                <td v-text="e.maxNum"></td>
                                <td>
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <button class="am-btn am-btn-default am-btn-xs am-text-danger am-round" title="删除公告"
                                                    @click="deleteById(e.id)">
                                                <span class="am-icon-trash-o" style="font-size: 1.7em"></span>
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                        <ul id="page" class="am-pagination am-fr">
                            <li @click.prevent="loadEvents(pageInfo.firstPage)">
                                <a href="#" >«</a>
                            </li>
                            <li @click.prevent="loadEvents(pageInfo.prePage)">
                                <a href="#" >‹</a>
                            </li>
                            <li v-for="n in pageInfo.navigatepageNums"
                                @click.prevent="loadEvents(n)">
                                <a href="#" v-text="n"
                                   v-bind:class="{'bg-secondary text-light': pageInfo.pageNum == n}">1</a>
                            </li>
                            <li @click.prevent="loadEvents(pageInfo.nextPage)">
                                <a href="#" >›</a>
                            </li>
                            <li @click.prevent="loadEvents(pageInfo.pages)">
                                <a href="#" >»</a>
                            </li>
                        </ul>
                        <hr />
                        <p>注：.....</p>
                    </form>
                </div>
            </div>

            <!--主信息右边方块-->
            <div class="shuju" id="shuju2">
                <div class="shujuone" style="margin-top: 20px;">
                    <dl>
                        <dt>用户总数：<span v-text="user_shuju"></span></dt>
                        <dt>会员人数： <span v-text="vip_shuju"></span></dt>
                        <dt>普通用户人数： <span v-text="nor_shuju"></span></dt>
                    </dl>
                    <ul>
                        <h2>{{computerVipProportion}}</h2>
                        <li>会员人数占比</li>
                    </ul>
                </div>
                <div class="shujutow" style="margin-top: 25px;">
                    <dl>
                        <dt>总活动事件数： <span v-text="activity_shuju"></span></dt>
                        <dt>志愿活动数： <span v-text="volunteer_shuju"></span></dt>
                        <dt>其他活动数： <span v-text="other_shuju"></span></dt>
                    </dl>
                    <ul>
                        <h2>{{computerVolunteerProportion}}</h2>
                        <li>志愿活动占比</li>
                    </ul>
                </div>
                <div class="shujuone" style="margin-top: 25px;">
                    <dl>
                        <dt>总活动事件数： <span v-text="activity_shuju"></span></dt>
                        <dt>有用户参与的活动总数： <span v-text="uact_shuju"></span></dt>
                    </dl>
                    <ul>
                        <h2>{{computerUactProportion}}</h2>
                        <li>用户参与活动占比</li>
                    </ul>
                </div>
            </div>
            <script type="text/javascript">
                jQuery(".slideTxtBox").slide();
            </script>
        </div>

        <!--右边底部--页脚-->
        <div class="footer">
            <ul>Copyright &copy; 2021.Vivid World Service Company</ul>
            <dl><a href="#" title="返回头部" class="am-icon-btn am-icon-arrow-up"></a></dl>
        </div>
    </div>
</div>
</body>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/polyfill/rem.min.js"></script>
<script src="assets/js/polyfill/respond.min.js"></script>
<script src="assets/js/amazeui.legacy.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/amazeui.min.js"></script>
<!--<![endif]-->

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--引入数据加载相关的js文件-->
<script src="js/BGOshuju.js"></script>
<!--引入表格加载相关的js文件-->
<script src="js/BGOevent.js"></script>
<!--引入管理员加载相关的js文件-->
<script src="js/BGOadmin.js"></script>
</html>